<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./src/img/index/favicon.ico">
    <link rel="stylesheet" href="./src/css/bootstrap.css">
    <link rel="stylesheet" href="./src/css/index.css">
    <link rel="stylesheet" href="./src/css/animate.css">
    <link rel="stylesheet" href="./src/css/iconfont.css">
    <link rel="stylesheet" href="./src/css/liMarquee.css">

    <script src="./src/js/jquery.js"></script>
    <script src="./src/js/bootstrap.js"></script>
    <script src="./js/iconfont.js"></script>
    <script src="./src/js/index.js"></script>
    <script src="./src/js/jquery.liMarquee.js"></script>

    <title>好知网 - 首页</title>
</head>
<body class="mybody">
    <nav class="navbar navbar-default mynav">
        <div class="container-fluid container container-bottom" >
          <!-- 响应式导航栏 -->
          <div class="navbar-header nav-center visible-xs container">
              <button type="button" class="navbar-toggle collapsed navLeft " data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only ">Toggle navigation</span>
                <span class="icon-bar spanBcg"></span>
                <span class="icon-bar spanBcg"></span>
                <span class="icon-bar spanBcg"></span>
              </button>
              <div class="warp-img container visible-xs"><a href="#"><img src="./img/index/logo.png" class="center-block"></a></div>

              <ul class="rig-login list-unstyled sma-login ">
                <li><a href="#">注册</a></li>
                <li><a href="#">登陆</a></li>
              </ul>
          </div>
      
          <!-- 导航栏 -->
          <div class="collapse navbar-collapse nav-border" id="bs-example-navbar-collapse-1">
            <div class="warp-left hidden-xs"><a href="#"><img src="./src/img/index/logo.png"></a></div>
            <ul class="nav navbar-nav navbar-left warp-li">
              <li class="active"><a href="#">学习中心<span class="sr-only"></span></a></li>
              <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">课程<span class="caret"></span></a>
                    <ul class="dropdown-menu warp-course hidden-xs hidden-sm hidden-md">
                        <li><a href="#">摄影课堂</a></li>
                        <li><a href="#">创意设计</a></li>
                        <li><a href="#">声乐器乐</a></li>
                        <li><a href="#">运动健身</a></li>
                        <li><a href="#">IT互联网</a></li>
                        <li><a href="#">兴趣爱好</a></li>
                        <li><a href="#">语言学习</a></li>
                        <li><a href="#">职场技能</a></li>
                        <li><a href="#">公开课</a></li>
                    </ul>
              </li>
              <li><a href="#">班级</a></li>
              <li><a href="#">小组</a></li>   
            </ul>

            
            <div class="navbar-right hidden-xs navbar-margin " > 
              <div class="navbar-form navbar-left warp-all">
                <div  class="nav navbar-nav navbar-left">
                  <div class="dropdown dropdown-class visible-md visible-lg">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">课程<span class="glyphicon glyphicon-menu-down"></span></a>
                      <ul class="dropdown-menu ">
                          <li><a href="#">课程</a></li>
                          <li><a href="#">话题</a></li>
                          <li><a href="#">教师</a></li>
                      </ul>
                  </div>
                </div>

                <div class="form-group navbar-right seacher">
                  <input type="text" class="form-control" placeholder="输入要查找的内容">
                  <a href="">
                    <svg class="icon icon-size" aria-hidden="true">
                      <use xlink:href="#icon-sousuo "></use>
                    </svg>
                  </a>
                </div>
              </div>

              <ul class="nav navbar-nav navbar-right rig-login hidden-xs rig-width">
                <li><a href="#">登陆</a></li>
                <li><a href="#">注册</a></li>
                <li><a href="#" class="visible-md visible-lg">好知App</a></li>
              </ul>

            </div>
            
          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <main>
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
              <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
              <li data-target="#carousel-example-generic" data-slide-to="1"></li>
              <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>
          
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
              <div class="item active">
                <a href=""><img src="./src/img/index/slide1.jpg" class="img-responsive center-block"></a>
              </div>
              <div class="item">
                <a href=""><img src="./src/img/index/slide2.jpg" class="img-responsive center-block"></a>
              </div>
              <div class="item">
                <a href=""><img src="./src/img/index/slide3.jpg" class="img-responsive center-block"></a>
              </div>
              
            </div>
          
            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
              <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
              <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
        </div>

        <div class="warp-data">
          <div class="warp-position hidden-xs animate__animated animate__fadeInRight">
            <p class="word-now">现在</p>
            <p class="txt-position">
              <span class="warp-font">2827</span>
              <p class="warp-txt">
                人在好知<br>学习课程
              </p>
            </p>
          </div>
          <a href="" class="text-center hidden-xs animate__animated animate__fadeInUp">立即学习</a>
        </div>
    </main>
    <section>
      <!-- hot course data-ride="carousel"-->
      <div class="container">
        <h2 class="pager">
          <strong class="word-strong">热门课程</strong> 
          <hr class="simple"/> 
        </h2>
        <div id="hotCourse" class="carousel slide" data-ride="carousel">
          <!-- Wrapper for slides -->
          <div class="carousel-inner container" role="listbox">
            <div class="item active ">
              <div class="row">
                <div class="col-md-6 col-sm-6 col-xs-6">
                  <div class="warp-over"> 
                    <img src="./src/img/index/hot-course01.jpg" class="img-responsive">
                    <div class="warp-pic">
                      <p class="pager">
                        <img src="./src/img/index/fashion1.jpg" class="img-circle" alt="">
                        <span class="pager">乱流</span>
                      </p>
                    </div>
                  </div>
                </div>
                <div class="col-md-6 col-sm-6 col-xs-6">
                  <div class="warp-over"> 
                    <img src="./src/img/index/hot-course01.jpg" class="img-responsive">
                    <div class="warp-pic">
                      <p class="pager">
                        <img src="./src/img/index/fashion1.jpg" class="img-circle" alt="">
                        <span class="pager">乱流</span>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="row">
                <div class="col-md-6 col-sm-6 col-xs-6">
                  <div class="warp-over"> 
                    <img src="./src/img/index/hot-course03.jpg" class="img-responsive">
                    <div class="warp-pic">
                      <p class="pager">
                        <img src="./src/img/index/fashion1.jpg" class="img-circle" alt="">
                        <span class="pager">乱流</span>
                      </p>
                    </div>
                  </div>
                </div>
                <div class="col-md-6 col-sm-6 col-xs-6">
                  <div class="warp-over"> 
                    <img src="./src/img/index/hot-course03.jpg" class="img-responsive">
                    <div class="warp-pic">
                      <p class="pager">
                        <img src="./src/img/index/fashion1.jpg" class="img-circle" alt="">
                        <span class="pager">乱流</span>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="row">
                <div class="col-md-6 col-sm-6 col-xs-6">
                  <div class="warp-over"> 
                    <img src="./src/img/index/hot-course06.jpg" class="img-responsive">
                    <div class="warp-pic">
                      <p class="pager">
                        <img src="./src/img/index/fashion1.jpg" class="img-circle" alt="">
                        <span class="pager">乱流</span>
                      </p>
                    </div>
                  </div>
                </div>
                <div class="col-md-6 col-sm-6 col-xs-6">
                  <div class="warp-over"> 
                    <img src="./src/img/index/hot-course06.jpg" class="img-responsive">
                    <div class="warp-pic">
                      <p class="pager">
                        <img src="./src/img/index/fashion1.jpg" class="img-circle" alt="">
                        <span class="pager">乱流</span>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        
          <!-- Controls -->
          <a class="left carousel-control" href="#hotCourse" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#hotCourse" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>

      <!-- 精品课程 -->
      <div class="container">
        <h2 class="pager">  
          <strong class="word-strong">精品课程</strong> 
          <hr class="simple"/> 
        </h2>
        <div class="warp-tab container">
          <!-- Nav tabs -->
            <ul class="nav nav-tabs clearfix warp-display" role="tablist">
              <li role="presentation" class="active"><a href="#1" aria-controls="home" role="tab" data-toggle="tab">精品推荐</a></li>
              <li role="presentation"><a href="#2" aria-controls="profile" role="tab" data-toggle="tab">特价推荐</a></li>
              <li role="presentation"><a href="#3" aria-controls="home" role="tab" data-toggle="tab">摄影课堂</a></li>
              <li role="presentation"><a href="#4" aria-controls="profile" role="tab" data-toggle="tab">创意设计</a></li>
              <li role="presentation"><a href="#5" aria-controls="home" role="tab" data-toggle="tab">兴趣爱好</a></li>
              <li role="presentation"><a href="#6" aria-controls="profile" role="tab" data-toggle="tab">声乐器乐</a></li>
              <li role="presentation"><a href="#7" aria-controls="home" role="tab" data-toggle="tab">运动健身</a></li>
              <li role="presentation"><a href="#8" aria-controls="profile" role="tab" data-toggle="tab">IT互联网 </a></li>
            </ul>
           
            <!-- Tab panes -->
            <div class="tab-content warp-panes">
              <div role="tabpanel" class="tab-pane active container" id="1">
                <div class="row">
                  <div class="col-md-3 col-sm-3 col-xs-6 ">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend01.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a"><a href="">Photoshop从小白到精通详解课</a></p> 
                        <p class="warp-txt">
                          <span class="img-re1">冯阳阳</span>
                          <span class="txt-money">￥99.00</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6 warp-overflow">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend02.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a"><a href="">玩转 Excel 100 课 - 限时优惠 ￥30</a></p> 
                        <p class="warp-txt">
                          <span class="img-re2"> RedWOod</span>
                          <span class="txt-money">￥30.00</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend03.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a"><a href="">飞思capture one11中文视频课程</a></p> 
                        <p class="warp-txt">
                          <span class="img-re3">莫等闲时</span>
                          <span class="txt-money">￥90.00</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend04.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a "><a href="">教育机构如何开展在线教育</a></p> 
                        <p class="warp-txt">
                          <span class="img-re4">EduSoho</span>
                          <span class="txt-free">免费</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend05.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a text-overflow"><a href="">YouCore系统思维应用：用框架解决问题</a></p> 
                        <p class="warp-txt">
                          <span class="img-re5">YouCore</span>
                          <span class="txt-money">￥99.00</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend06.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a text-overflow"><a href="">从零开始玩转热靴闪光灯，实战演练课程</a></p> 
                        <p class="warp-txt">
                          <span class="img-re6">摄影读书会</span>
                          <span class="txt-money">￥99.00</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend07.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a text-overflow"><a href="">零基础学习UI设计--ps基础阶段</a></p> 
                        <p class="warp-txt">
                          <span class="img-re7">XCC设计</span>
                          <span class="txt-free">免费</span>
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div role="tabpanel" class="tab-pane container" id="2">
                <div class="row">
                  <div class="col-md-3 col-sm-3 col-xs-6 ">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend01.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a"><a href="">Photoshop从小白到精通详解课</a></p> 
                        <p class="warp-txt">
                          <span class="img-re1">冯阳阳</span>
                          <span class="txt-money">￥99.00</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6 warp-overflow">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend02.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a"><a href="">玩转 Excel 100 课 - 限时优惠 ￥30</a></p> 
                        <p class="warp-txt">
                          <span class="img-re2"> RedWOod</span>
                          <span class="txt-money">￥30.00</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend02.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a"><a href="">飞思capture one11中文视频课程</a></p> 
                        <p class="warp-txt">
                          <span class="img-re3">莫等闲时</span>
                          <span class="txt-money">￥90.00</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend02.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a"><a href="">教育机构如何开展在线教育</a></p> 
                        <p class="warp-txt">
                          <span class="img-re4">EduSoho</span>
                          <span class="txt-free">免费</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend05.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a"><a href="">YouCore系统思维应用：用框架解决问题</a></p> 
                        <p class="warp-txt">
                          <span class="img-re5">YouCore</span>
                          <span class="txt-money">￥99.00</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend06.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a"><a href="">从零开始玩转热靴闪光灯，实战演练课程</a></p> 
                        <p class="warp-txt">
                          <span class="img-re6">摄影读书会</span>
                          <span class="txt-money">￥99.00</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend07.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a"><a href="">零基础学习UI设计--ps基础阶段</a></p> 
                        <p class="warp-txt">
                          <span class="img-re7">XCC设计</span>
                          <span class="txt-free">免费</span>
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div role="tabpanel" class="tab-pane container" id="3">
                <div class="row">
                  <div class="col-md-3 col-sm-3 col-xs-6 ">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend01.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a"><a href="">Photoshop从小白到精通详解课</a></p> 
                        <p class="warp-txt">
                          <span class="img-re1">冯阳阳</span>
                          <span class="txt-money">￥99.00</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6 warp-overflow">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend03.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a"><a href="">玩转 Excel 100 课 - 限时优惠 ￥30</a></p> 
                        <p class="warp-txt">
                          <span class="img-re2"> RedWOod</span>
                          <span class="txt-money">￥30.00</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend03.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a"><a href="">飞思capture one11中文视频课程</a></p> 
                        <p class="warp-txt">
                          <span class="img-re3">莫等闲时</span>
                          <span class="txt-money">￥90.00</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend03.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a "><a href="">教育机构如何开展在线教育</a></p> 
                        <p class="warp-txt">
                          <span class="img-re4">EduSoho</span>
                          <span class="txt-free">免费</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend05.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a text-overflow"><a href="">YouCore系统思维应用：用框架解决问题</a></p> 
                        <p class="warp-txt">
                          <span class="img-re5">YouCore</span>
                          <span class="txt-money">￥99.00</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend06.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a text-overflow"><a href="">从零开始玩转热靴闪光灯，实战演练课程</a></p> 
                        <p class="warp-txt">
                          <span class="img-re6">摄影读书会</span>
                          <span class="txt-money">￥99.00</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend07.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a text-overflow"><a href="">零基础学习UI设计--ps基础阶段</a></p> 
                        <p class="warp-txt">
                          <span class="img-re7">XCC设计</span>
                          <span class="txt-free">免费</span>
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div role="tabpanel" class="tab-pane container" id="4">
                <div class="row">
                  <div class="col-md-3 col-sm-3 col-xs-6 ">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend01.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a"><a href="">Photoshop从小白到精通详解课</a></p> 
                        <p class="warp-txt">
                          <span class="img-re1">冯阳阳</span>
                          <span class="txt-money">￥99.00</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6 warp-overflow">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend04.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a"><a href="">玩转 Excel 100 课 - 限时优惠 ￥30</a></p> 
                        <p class="warp-txt">
                          <span class="img-re2"> RedWOod</span>
                          <span class="txt-money">￥30.00</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend04.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a"><a href="">飞思capture one11中文视频课程</a></p> 
                        <p class="warp-txt">
                          <span class="img-re3">莫等闲时</span>
                          <span class="txt-money">￥90.00</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend04.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a "><a href="">教育机构如何开展在线教育</a></p> 
                        <p class="warp-txt">
                          <span class="img-re4">EduSoho</span>
                          <span class="txt-free">免费</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend05.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a text-overflow"><a href="">YouCore系统思维应用：用框架解决问题</a></p> 
                        <p class="warp-txt">
                          <span class="img-re5">YouCore</span>
                          <span class="txt-money">￥99.00</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend06.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a text-overflow"><a href="">从零开始玩转热靴闪光灯，实战演练课程</a></p> 
                        <p class="warp-txt">
                          <span class="img-re6">摄影读书会</span>
                          <span class="txt-money">￥99.00</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend07.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a text-overflow"><a href="">零基础学习UI设计--ps基础阶段</a></p> 
                        <p class="warp-txt">
                          <span class="img-re7">XCC设计</span>
                          <span class="txt-free">免费</span>
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div role="tabpanel" class="tab-pane container" id="5">
                <div class="row">
                  <div class="col-md-3 col-sm-3 col-xs-6 ">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend01.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a"><a href="">Photoshop从小白到精通详解课</a></p> 
                        <p class="warp-txt">
                          <span class="img-re1">冯阳阳</span>
                          <span class="txt-money">￥99.00</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6 warp-overflow">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend05.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a"><a href="">玩转 Excel 100 课 - 限时优惠 ￥30</a></p> 
                        <p class="warp-txt">
                          <span class="img-re2"> RedWOod</span>
                          <span class="txt-money">￥30.00</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend05.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a"><a href="">飞思capture one11中文视频课程</a></p> 
                        <p class="warp-txt">
                          <span class="img-re3">莫等闲时</span>
                          <span class="txt-money">￥90.00</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend05.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a "><a href="">教育机构如何开展在线教育</a></p> 
                        <p class="warp-txt">
                          <span class="img-re4">EduSoho</span>
                          <span class="txt-free">免费</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend05.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a text-overflow"><a href="">YouCore系统思维应用：用框架解决问题</a></p> 
                        <p class="warp-txt">
                          <span class="img-re5">YouCore</span>
                          <span class="txt-money">￥99.00</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend06.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a text-overflow"><a href="">从零开始玩转热靴闪光灯，实战演练课程</a></p> 
                        <p class="warp-txt">
                          <span class="img-re6">摄影读书会</span>
                          <span class="txt-money">￥99.00</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend07.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a text-overflow"><a href="">零基础学习UI设计--ps基础阶段</a></p> 
                        <p class="warp-txt">
                          <span class="img-re7">XCC设计</span>
                          <span class="txt-free">免费</span>
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div role="tabpanel" class="tab-pane container" id="6">
                <div class="row">
                  <div class="col-md-3 col-sm-3 col-xs-6 ">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend01.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a"><a href="">Photoshop从小白到精通详解课</a></p> 
                        <p class="warp-txt">
                          <span class="img-re1">冯阳阳</span>
                          <span class="txt-money">￥99.00</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6 warp-overflow">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend06.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a"><a href="">玩转 Excel 100 课 - 限时优惠 ￥30</a></p> 
                        <p class="warp-txt">
                          <span class="img-re2"> RedWOod</span>
                          <span class="txt-money">￥30.00</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend06.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a"><a href="">飞思capture one11中文视频课程</a></p> 
                        <p class="warp-txt">
                          <span class="img-re3">莫等闲时</span>
                          <span class="txt-money">￥90.00</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend06.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a "><a href="">教育机构如何开展在线教育</a></p> 
                        <p class="warp-txt">
                          <span class="img-re4">EduSoho</span>
                          <span class="txt-free">免费</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend05.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a text-overflow"><a href="">YouCore系统思维应用：用框架解决问题</a></p> 
                        <p class="warp-txt">
                          <span class="img-re5">YouCore</span>
                          <span class="txt-money">￥99.00</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend06.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a text-overflow"><a href="">从零开始玩转热靴闪光灯，实战演练课程</a></p> 
                        <p class="warp-txt">
                          <span class="img-re6">摄影读书会</span>
                          <span class="txt-money">￥99.00</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend07.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a text-overflow"><a href="">零基础学习UI设计--ps基础阶段</a></p> 
                        <p class="warp-txt">
                          <span class="img-re7">XCC设计</span>
                          <span class="txt-free">免费</span>
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div role="tabpanel" class="tab-pane container" id="7">
                <div class="row">
                  <div class="col-md-3 col-sm-3 col-xs-6 ">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend01.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a"><a href="">Photoshop从小白到精通详解课</a></p> 
                        <p class="warp-txt">
                          <span class="img-re1">冯阳阳</span>
                          <span class="txt-money">￥99.00</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6 warp-overflow">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend07.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a"><a href="">玩转 Excel 100 课 - 限时优惠 ￥30</a></p> 
                        <p class="warp-txt">
                          <span class="img-re2"> RedWOod</span>
                          <span class="txt-money">￥30.00</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend07.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a"><a href="">飞思capture one11中文视频课程</a></p> 
                        <p class="warp-txt">
                          <span class="img-re3">莫等闲时</span>
                          <span class="txt-money">￥90.00</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend07.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a "><a href="">教育机构如何开展在线教育</a></p> 
                        <p class="warp-txt">
                          <span class="img-re4">EduSoho</span>
                          <span class="txt-free">免费</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend05.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a text-overflow"><a href="">YouCore系统思维应用：用框架解决问题</a></p> 
                        <p class="warp-txt">
                          <span class="img-re5">YouCore</span>
                          <span class="txt-money">￥99.00</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend06.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a text-overflow"><a href="">从零开始玩转热靴闪光灯，实战演练课程</a></p> 
                        <p class="warp-txt">
                          <span class="img-re6">摄影读书会</span>
                          <span class="txt-money">￥99.00</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend07.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a text-overflow"><a href="">零基础学习UI设计--ps基础阶段</a></p> 
                        <p class="warp-txt">
                          <span class="img-re7">XCC设计</span>
                          <span class="txt-free">免费</span>
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div role="tabpanel" class="tab-pane container" id="8">
                <div class="row">
                  <div class="col-md-3 col-sm-3 col-xs-6 ">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend01.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a"><a href="">Photoshop从小白到精通详解课</a></p> 
                        <p class="warp-txt">
                          <span class="img-re1">冯阳阳</span>
                          <span class="txt-money">￥99.00</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6 warp-overflow">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend05.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a"><a href="">玩转 Excel 100 课 - 限时优惠 ￥30</a></p> 
                        <p class="warp-txt">
                          <span class="img-re2"> RedWOod</span>
                          <span class="txt-money">￥30.00</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend02.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a"><a href="">飞思capture one11中文视频课程</a></p> 
                        <p class="warp-txt">
                          <span class="img-re3">莫等闲时</span>
                          <span class="txt-money">￥90.00</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend06.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a "><a href="">教育机构如何开展在线教育</a></p> 
                        <p class="warp-txt">
                          <span class="img-re4">EduSoho</span>
                          <span class="txt-free">免费</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend05.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a text-overflow"><a href="">YouCore系统思维应用：用框架解决问题</a></p> 
                        <p class="warp-txt">
                          <span class="img-re5">YouCore</span>
                          <span class="txt-money">￥99.00</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend06.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a text-overflow"><a href="">从零开始玩转热靴闪光灯，实战演练课程</a></p> 
                        <p class="warp-txt">
                          <span class="img-re6">摄影读书会</span>
                          <span class="txt-money">￥99.00</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="thumbnail warp-border">
                      <div class="warp-overflow"><img src="./src/img/index/recommend07.jpg" class="img-responsive"></div>
                      <div class="caption warp-padding">
                        <p class="warp-a text-overflow"><a href="">零基础学习UI设计--ps基础阶段</a></p> 
                        <p class="warp-txt">
                          <span class="img-re7">XCC设计</span>
                          <span class="txt-free">免费</span>
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
        </div>
        </div>
      </div>

      <!-- 班级推荐 -->
      <div class="container classRecommend">
        <h2 class="pager">  
          <strong class="word-strong">班级推荐</strong> 
          <hr class="simple"/> 
        </h2>
        <div>
          <div class="row">
            <div class="col-sm-6 col-md-3 col-xs-6">
              <div class="thumbnail">
                <div class="warp-over"> 
                  <img src="./src/img/index/class01.jpg" class="img-responsive">
                  <div class="warp-pic">
                    <ul>
                      <li>
                        <span class="iconfont icon-wode-copy-copy"></span>
                        <span>270</span>
                        <span>人已加入学习</span>
                      </li>
                      <li>
                        <span class="iconfont icon-lanhaiguifantubiao-"></span>
                        <span>32</span>
                        <span>课时</span>
                      </li>
                      <li>
                        <span class="iconfont icon-video-camera"></span>
                        <span>6</span>
                        <span>作业</span>
                      </li>
                      <li>
                        <span class="iconfont icon-dayi"></span>
                        <span>24</span>
                        <span>小时答疑</span>
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="caption">
                  <h3>零基础摄影入门班</h3>
                  <p>好知摄影入门班，最有趣的单反摄影入门教程！零基础学习摄影入门技巧，专业摄影师</p>
                  <p>
                    <a href="#" class="btn btn-default" role="button">立即加入</a>
                  </p>
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-md-3 col-xs-6">
              <div class="thumbnail">
                <div class="warp-over">
                  <img src="./src/img/index/class02.jpg" class="img-responsive" >
                  <div class="warp-pic">
                    <ul>
                      <li>
                        <span class="iconfont icon-wode-copy-copy"></span>
                        <span>270</span>
                        <span>人已加入学习</span>
                      </li>
                      <li>
                        <span class="iconfont icon-lanhaiguifantubiao-"></span>
                        <span>32</span>
                        <span>课时</span>
                      </li>
                      <li>
                        <span class="iconfont icon-video-camera"></span>
                        <span>6</span>
                        <span>作业</span>
                      </li>
                      <li>
                        <span class="iconfont icon-dayi"></span>
                        <span>24</span>
                        <span>小时答疑</span>
                      </li>
                    </ul>
                  </div>
                </div>
                
                <div class="caption">
                  <h3>极致风光摄影进阶提高班</h3>
                  <p>华盖 500PX签约摄影师独家风光后期秘诀。从入门到提高，系统地学习前期拍摄技术</p>
                  <p>
                    <a href="#" class="btn btn-default" role="button">立即加入</a>
                  </p>
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-md-3 col-xs-6">
              <div class="thumbnail">
                <div class="warp-over">
                  <img src="./src/img/index/class03.jpg" class="img-responsive">
                  <div class="warp-pic">
                    <ul>
                      <li>
                        <span class="iconfont icon-wode-copy-copy"></span>
                        <span>270</span>
                        <span>人已加入学习</span>
                      </li>
                      <li>
                        <span class="iconfont icon-lanhaiguifantubiao-"></span>
                        <span>32</span>
                        <span>课时</span>
                      </li>
                      <li>
                        <span class="iconfont icon-video-camera"></span>
                        <span>6</span>
                        <span>作业</span>
                      </li>
                      <li>
                        <span class="iconfont icon-dayi"></span>
                        <span>24</span>
                        <span>小时答疑</span>
                      </li>
                    </ul>
                  </div>
                </div>
                
                <div class="caption">
                  <h3>Adobe Lightroom cc后期基础入门班</h3>
                  <p>每天10min 轻松入门</p>
                  <p>
                    <a href="#" class="btn btn-default" role="button">立即加入</a>
                  </p>
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-md-3 col-xs-6">
              <div class="thumbnail">
                <div class="warp-over">
                  <img src="./src/img/index/class04.jpg" class="img-responsive">
                  <div class="warp-pic">
                    <ul>
                      <li>
                        <span class="iconfont icon-wode-copy-copy"></span>
                        <span>270</span>
                        <span>人已加入学习</span>
                      </li>
                      <li>
                        <span class="iconfont icon-lanhaiguifantubiao-"></span>
                        <span>32</span>
                        <span>课时</span>
                      </li>
                      <li>
                        <span class="iconfont icon-video-camera"></span>
                        <span>6</span>
                        <span>作业</span>
                      </li>
                      <li>
                        <span class="iconfont icon-dayi"></span>
                        <span>24</span>
                        <span>小时答疑</span>
                      </li>
                    </ul>
                  </div>
                </div>
                
                <div class="caption">
                  <h3>牛牛人像摄影班</h3>
                  <p>人像摄影可以是怎样的？它可以是日系清新人像：清淡的色调，简单的画面，不经意</p>
                  <p>
                    <a href="#" class="btn btn-default" role="button">立即加入</a>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>


        <div class="word-rotation container">
          <h4>班级动态</h4>

          <div class="txt row clearfix">
              <div class="txt-left clearfix col-md-6 col-xs-12">
                <span class="txt-col">思琪123加入了</span>
                <span class="txt-center">零基础学习摄影</span>
                <span class="txt-day">4天前</span>
              </div>
              <div class="txt-rig clearfix col-md-6 col-xs-12">
                <span class="txt-col">饿就123加入了</span>
                <span class="txt-center">零基础学习摄影</span>
                <span class="txt-day">4天前</span>
              </div>
              <div class="txt-left clearfix col-md-6 col-xs-12">
                <span class="txt-col">今何在w加入了</span>
                <span class="txt-center">零基础学习摄影</span>
                <span class="txt-day">4天前</span>
              </div>
              <div class="txt-rig clearfix col-md-6 col-xs-12">
                <span class="txt-col">475123加入了</span>
                <span class="txt-center">零基础学习摄影</span>
                <span class="txt-day">4天前</span>
              </div>
          </div> 
        </div>
        <p class="warp-more">
          <a href="" >更多<span class="glyphicon glyphicon-menu-right"></span></a>
        </p>



      </div>

      <!-- 话题精选 -->
      <div class="hotTopic container">
        <h2 class="pager">  
          <strong class="word-strong">话题精选</strong> 
          <hr class="simple"/> 
        </h2>
        
        <!-- 轮播图 data-ride="carousel"-->
        <div id="new-click" class="carousel" >
          <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">
            <div class="item active">
              <div class="row">
                <div class="col-md-3 col-sm-6 col-xs-6">
                  <div class="warp-overflow"><img src="./src/img/index/topic01.jpg" class="img-responsive center-block margin-left"></div>
                  <div class="carousel-caption pager">
                    <p>【招聘客服】20名</p>
                    <p>
                      <svg class="icon name-span icon-size" aria-hidden="true">
                        <use xlink:href="#icon-yonghu"></use>
                      </svg>
                      <span class="name-span">知了</span>
                      <span class="day-span">2018-03-12</span>
                    </p>
                  </div>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-6">
                  <div class="warp-overflow"><img src="./src/img/index/topic02.jpg" class="img-responsive center-block margin-rig"></div>
                  <div class="carousel-caption pager">
                    <p>【招聘客服】20名</p>
                    <p>
                      <svg class="icon name-span icon-size" aria-hidden="true">
                        <use xlink:href="#icon-yonghu"></use>
                      </svg>
                      <span class="name-span">知了</span>
                      <span class="day-span">2018-03-12</span>
                    </p>
                  </div> 
                </div>
                <div class="col-md-3 col-sm-6 col-xs-6">
                  <div class="warp-overflow"><img src="./src/img/index/topic03.jpg" class="img-responsive center-block margin-left"></div>
                  <div class="carousel-caption pager">
                    <p>【招聘客服】20名</p>
                    <p>
                      <svg class="icon name-span icon-size" aria-hidden="true">
                        <use xlink:href="#icon-yonghu"></use>
                      </svg>
                      <span class="name-span">知了</span>
                      <span class="day-span">2018-03-12</span>
                    </p>
                  </div> 
                </div>
                <div class="col-md-3 col-sm-6 col-xs-6">
                  <div class="warp-overflow"><img src="./src/img/index/topic04.jpg" class="img-responsive center-block margin-rig"></div>
                  <div class="carousel-caption pager">
                    <p>【招聘客服】20名</p>
                    <p>
                      <svg class="icon name-span icon-size" aria-hidden="true">
                        <use xlink:href="#icon-yonghu"></use>
                      </svg>
                      <span class="name-span">知了</span>
                      <span class="day-span">2018-03-12</span>
                    </p>
                  </div> 
                </div>                
              </div>
            </div>

            <div class="item">
              <div class="row">
                <div class="col-md-3 col-sm-6 col-xs-6">
                  <div class="warp-overflow"><img src="./src/img/index/topic05.jpg" class="img-responsive center-block margin-left"></div>
                  <div class="carousel-caption pager">
                    <p>【招聘客服】20名</p>
                    <p>
                      <svg class="icon name-span icon-size" aria-hidden="true">
                        <use xlink:href="#icon-yonghu"></use>
                      </svg>
                      <span class="name-span">知了</span>
                      <span class="day-span">2018-03-12</span>
                    </p>
                  </div>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-6">
                  <div class="warp-overflow"><img src="./src/img/index/topic06.jpg" class="img-responsive center-block margin-rig"></div>
                  <div class="carousel-caption pager">
                    <p>【招聘客服】20名</p>
                    <p>
                      <svg class="icon name-span icon-size" aria-hidden="true">
                        <use xlink:href="#icon-yonghu"></use>
                      </svg>
                      <span class="name-span">知了</span>
                      <span class="day-span">2018-03-12</span>
                    </p>
                  </div> 
                </div>
                <div class="col-md-3 col-sm-6 col-xs-6">
                  <div class="warp-overflow"><img src="./src/img/index/topic07.jpg" class="img-responsive center-block margin-left"></div>
                  <div class="carousel-caption pager">
                    <p>【招聘客服】20名</p>
                    <p>
                      <svg class="icon name-span icon-size" aria-hidden="true">
                        <use xlink:href="#icon-yonghu"></use>
                      </svg>
                      <span class="name-span">知了</span>
                      <span class="day-span">2018-03-12</span>
                    </p>
                  </div> 
                </div>
                <div class="col-md-3 col-sm-6 col-xs-6">
                  <div class="warp-overflow"><img src="./src/img/index/topic08.jpg" class="img-responsive center-block margin-rig"></div>
                  <div class="carousel-caption pager">
                    <p>【招聘客服】20名</p>
                    <p>
                      <svg class="icon name-span icon-size" aria-hidden="true">
                        <use xlink:href="#icon-yonghu"></use>
                      </svg>
                      <span class="name-span">知了</span>
                      <span class="day-span">2018-03-12</span>
                    </p>
                  </div> 
                </div>                
              </div>
            </div>
            
            <div class="item">
              <div class="row">
                <div class="col-md-3 col-sm-6 col-xs-6">
                  <div class="warp-overflow"><img src="./src/img/index/topic09.jpg" class="img-responsive center-block margin-left"></div>
                  <div class="carousel-caption pager">
                    <p>【招聘客服】20名</p>
                    <p>
                      <svg class="icon name-span icon-size" aria-hidden="true">
                        <use xlink:href="#icon-yonghu"></use>
                      </svg>
                      <span class="name-span">知了</span>
                      <span class="day-span">2018-03-12</span>
                    </p>
                  </div>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-6">
                  <div class="warp-overflow"><img src="./src/img/index/topic10.jpg" class="img-responsive center-block margin-rig"></div>
                  <div class="carousel-caption pager">
                    <p>【招聘客服】20名</p>
                    <p>
                      <svg class="icon name-span icon-size" aria-hidden="true">
                        <use xlink:href="#icon-yonghu"></use>
                      </svg>
                      <span class="name-span">知了</span>
                      <span class="day-span">2018-03-12</span>
                    </p>
                  </div> 
                </div>
                <div class="col-md-3 col-sm-6 col-xs-6">
                  <div class="warp-overflow"><img src="./src/img/index/topic11.jpg" class="img-responsive center-block margin-left"></div>
                  <div class="carousel-caption pager">
                    <p>【招聘客服】20名</p>
                    <p>
                      <svg class="icon name-span icon-size" aria-hidden="true">
                        <use xlink:href="#icon-yonghu"></use>
                      </svg>
                      <span class="name-span">知了</span>
                      <span class="day-span">2018-03-12</span>
                    </p>
                  </div> 
                </div>                
              </div>
            </div>
          </div>
        
          <!-- Controls -->
          <a class="left carousel-control" href="#new-click" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#new-click" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>



      </div>

      <!-- 热门标签 -->
      <div class="hotTag container">
        <h2 class="pager">  
          <strong class="word-strong">热门标签</strong> 
          <hr class="simple"/> 
        </h2>
        <div class="warp-all container">
          <div class="row">
            <div class="col-md-2 col-sm-3 col-xs-4">
              <div class="thumbnail">
                <img src="./src/img/index/tag1.jpg" >
                <div class="caption">
                  <h3 class="pager"> Lightroom</h3>
                  <p>12门课程</p>
                </div>
              </div>
            </div>
            <div class="col-md-2 col-sm-3 col-xs-4">
              <div class="thumbnail">
                <img src="./src/img/index/tag2.jpg" >
                <div class="caption">
                  <h3 class="pager">Photoshop</h3>
                  <p>100门课程</p>
                </div>
              </div>
            </div>
            <div class="col-md-2 col-sm-3 col-xs-4">
              <div class="thumbnail">
                <img src="./src/img/index/tag3.jpg" >
                <div class="caption">
                  <h3 class="pager">After Effect</h3>
                  <p>15门课程</p>
                </div>
              </div>
            </div>
            <div class="col-md-2 col-sm-3 col-xs-4">
              <div class="thumbnail">
                <img src="./src/img/index/tag4.jpg" >
                <div class="caption">
                  <h3 class="pager">吉他</h3>
                  <p>72门课程</p>
                </div>
              </div>
            </div>
            <div class="col-md-2 col-sm-3 col-xs-4">
              <div class="thumbnail">
                <img src="./src/img/index/tag5.jpg" >
                <div class="caption">
                  <h3 class="pager">人像摄影</h3>
                  <p>52门课程</p>
                </div>
              </div>
            </div>
            <div class="col-md-2 col-sm-3 col-xs-4">
              <div class="thumbnail">
                <img src="./src/img/index/tag6.jpg" >
                <div class="caption">
                  <h3 class="pager">产品摄影</h3>
                  <p>30门课程</p>
                </div>
              </div>
            </div>
            <div class="col-md-2 col-sm-3 col-xs-4">
              <div class="thumbnail">
                <img src="./src/img/index/tag7.jpg" >
                <div class="caption">
                  <h3 class="pager">摄影布光</h3>
                  <p>26门课程</p>
                </div>
              </div>
            </div>
            <div class="col-md-2 col-sm-3 col-xs-4">
              <div class="thumbnail">
                <img src="./src/img/index/tag8.jpg" >
                <div class="caption">
                  <h3 class="pager">3D制作</h3>
                  <p>24门课程</p>
                </div>
              </div>
            </div>
            <div class="col-md-2 col-sm-3 col-xs-4">
              <div class="thumbnail">
                <img src="./src/img/index/tag9.jpg" >
                <div class="caption">
                  <h3 class="pager">风光摄影</h3>
                  <p>41门课程</p>
                </div>
              </div>
            </div>
            <div class="col-md-2 col-sm-3 col-xs-4">
              <div class="thumbnail">
                <img src="./src/img/index/tag10.jpg" >
                <div class="caption">
                  <h3 class="pager">办公软件</h3>
                  <p>31门课程</p>
                </div>
              </div>
            </div>
            <div class="col-md-2 col-sm-3 col-xs-4">
              <div class="thumbnail">
                <img src="./src/img/index/tag11.jpg" >
                <div class="caption">
                  <h3 class="pager">手工制作</h3>
                  <p>32门课程</p>
                </div>
              </div>
            </div>
            <div class="col-md-2 col-sm-3 col-xs-4">
              <div class="thumbnail">
                <img src="./src/img/index/tag12.jpg" >
                <div class="caption">
                  <h3 class="pager">音频制作</h3>
                  <p>32门课程</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 认证达人 -->
      <div class="fashion container">
        <h2 class="pager">  
          <strong class="word-strong">认证达人</strong> 
          <hr class="simple"/> 
        </h2>

          <!-- 轮播图 -->
          <div id="fashionPer" class="carousel" data-ride="carousel">
          
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
              <div class="item active container">
                <div class="row ">
                  <div class="col-md-4 col-sm-4 warp-txt">
                    <img src="./src/img/index/fashion1.jpg" class="img-circle img-responsive">
                    <div class="carousel-caption">
                      <p class="txt-top">乱流</p>
                      <p class="txt-center"><span>摄影达人</span></p>
                      <p class="txt-bottom">摄影达人，分享了众多摄影教</p>
                    </div>
                  </div>
                  <div class="col-md-4 col-sm-4 warp-txt">
                    <img src="./src/img/index/fashion1.jpg" class="img-circle img-responsive">
                    <div class="carousel-caption">
                      <p class="txt-top">乱流</p>
                      <p class="txt-center"><span>摄影达人</span></p>
                      <p class="txt-bottom">摄影达人，分享了众多摄影教</p>
                    </div>
                  </div>
                  <div class="col-md-4 col-sm-4 warp-txt">
                    <img src="./src/img/index/fashion1.jpg" class="img-circle img-responsive">
                    <div class="carousel-caption">
                      <p class="txt-top">乱流</p>
                      <p class="txt-center"><span>摄影达人</span></p>
                      <p class="txt-bottom">摄影达人，分享了众多摄影教</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="item container">
                <div class="row ">
                  <div class="col-md-4 col-sm-4 warp-txt">
                    <img src="./src/img/index/fashion2.jpg" class="img-circle img-responsive">
                    <div class="carousel-caption">
                      <p class="txt-top">乱流</p>
                      <p class="txt-center"><span>摄影达人</span></p>
                      <p class="txt-bottom">摄影达人，分享了众多摄影教</p>
                    </div>
                  </div>
                  <div class="col-md-4 col-sm-4 warp-txt">
                    <img src="./src/img/index/fashion2.jpg" class="img-circle img-responsive">
                    <div class="carousel-caption">
                      <p class="txt-top">乱流</p>
                      <p class="txt-center"><span>摄影达人</span></p>
                      <p class="txt-bottom">摄影达人，分享了众多摄影教</p>
                    </div>
                  </div>
                  <div class="col-md-4 col-sm-4 warp-txt">
                    <img src="./src/img/index/fashion2.jpg" class="img-circle img-responsive">
                    <div class="carousel-caption">
                      <p class="txt-top">乱流</p>
                      <p class="txt-center"><span>摄影达人</span></p>
                      <p class="txt-bottom">摄影达人，分享了众多摄影教</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="item container">
                <div class="row ">
                  <div class="col-md-4 col-sm-4 warp-txt">
                    <img src="./src/img/index/fashion3.jpg" class="img-circle img-responsive">
                    <div class="carousel-caption">
                      <p class="txt-top">乱流</p>
                      <p class="txt-center"><span>摄影达人</span></p>
                      <p class="txt-bottom">摄影达人，分享了众多摄影教</p>
                    </div>
                  </div>
                  <div class="col-md-4 col-sm-4 warp-txt">
                    <img src="./src/img/index/fashion3.jpg" class="img-circle img-responsive">
                    <div class="carousel-caption">
                      <p class="txt-top">乱流</p>
                      <p class="txt-center"><span>摄影达人</span></p>
                      <p class="txt-bottom">摄影达人，分享了众多摄影教</p>
                    </div>
                  </div>
                  <div class="col-md-4 col-sm-4 warp-txt">
                    <img src="./src/img/index/fashion3.jpg" class="img-circle img-responsive">
                    <div class="carousel-caption">
                      <p class="txt-top">乱流</p>
                      <p class="txt-center"><span>摄影达人</span></p>
                      <p class="txt-bottom">摄影达人，分享了众多摄影教</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          
            <!-- Controls -->
            <a class="left carousel-control" href="#fashionPer" role="button" data-slide="prev">
              <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#fashionPer" role="button" data-slide="next">
              <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>
          
          <p class="warp-more">
            <a href="" >查看更多<span class="glyphicon glyphicon-menu-right"></span></a>
            <a href="" >申请入驻<span class="glyphicon glyphicon-menu-right"></span></a>
          </p>

      </div>

      <!-- 更有趣的学习 -->
        <div class="study container">
          <div class="row container">
            <div class=" col-md-4 col-sm-4 col-xs-4 one">
              <div class="thumbnail animate__animated animate__fadeInDown">
                <img src="./src/img/index/study01.png" class="img-circle ">
                <div class="caption">
                  <p>发现数千门课程</p>
                </div>
              </div>
            </div>
            <div class=" col-md-4 col-sm-4 col-xs-4 two">
              <div class="thumbnail  animate__animated animate__fadeInDown">
                <img src="./src/img/index/study02.png" class="img-circle">
                <div class="caption">
                  <p>专业学习计划指引</p>
                </div>
              </div>
            </div>
            <div class=" col-md-4 col-sm-4 col-xs-4 three">
              <div class="thumbnail  animate__animated animate__fadeInDown">
                <img src="./src/img/index/study03.png" class="img-circle">
                <div class="caption">
                  <p>与同学一起讨论</p>
                </div>
              </div>
            </div>
          </div>
          <p><a href="">更有趣有效的学习</a></p>
        </div>
    </section>

    <footer class="footer">
      <div class="row container">
        <div class="col-md-6 pager"><img src="./src/img/index/foot-logo.png" alt=""></div>
        <div class="col-md-6 second">
          <p class="warp-txt pager">
            <span>关于我们</span>|
            <span>加入我们</span>|
            <span>合作申请</span>|
            <span>意见反馈</span>|
            <span>用户协议</span>
          </p>
          
          <p class="warp-sma pager">
            <span>浙ICP备13006852号</span>
            <span>浙B2-20160872</span>  
          </p>
          <p class="warp-plice pager">浙公网安备 33010802003863号</p>
        </div>
        <div class="col-md-6 pager">
          <span>关注我们：</span>
          <span class="warp-icon">
            <svg class="icon icon-size" aria-hidden="true">
              <use xlink:href="#icon-weibo"></use>
            </svg>
        </span>
          <span  class="warp-icon">
            <svg class="icon icon-size" aria-hidden="true">
              <use xlink:href="#icon-weixin"></use>
            </svg>
          </span>
          <span class="warp-icon">
            <svg class="icon icon-size" aria-hidden="true">
              <use xlink:href="#icon-qq"></use>
            </svg>
          </span>
        </div>
      </div>
      <div class="foot-padding"> 
        <p class="foot-txt pager container">
          <span>友情链接:</span>
          <span>EduSoho开源网络课堂</span> | 
          <span>气球鱼学院</span> | 
          <span>360安全网址导航</span> | 
          <span>hao123</span> | 
          <span>绿色网</span> | 
          <span>站长之家</span> | 
          <span>新客网</span> | 
          <span>暖石网</span> | 
          <span>麦子学院</span> |
          <span>博为峰网校</span>
        </p>
        <p class="foot-txt2">
          <span>Powered by EduSoho v7.5.15 ©2014-2020 好知网</span>
        </p>
      </div>
       
    </footer>
    <script src="./src/js/index.js"></script>
</body>
</html>